<template>
	<div class="wrap">
		<div class="banner">
			<mt-swipe :auto="4000">
				<mt-swipe-item>
					<img src="../../assets/image/banner04.jpg">
				</mt-swipe-item>
			</mt-swipe>
		</div>
		<div class="menu-box2">
			<div class="rdbox-warp" v-for="(item, index) in menuList" :key="index" @click="go(item)">
				<div :class="item.class" class="rdbox">
					<img :src="item.src">
				</div>
				<p class="rd-title">{{item.title}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import person from '../../assets/image/person.png'
	import question from '../../assets/image/question.png'
	import sport from '../../assets/image/sport.png'
	import word from '../../assets/image/word.png'
	import idcard from '../../assets/image/idcard.png'
	import chat from '../../assets/image/chat.png'
	export default {
		data() {
			return {
				menuList: [{
						src: idcard,
						title: '基本信息',
						class: 'color1',
						link: 'inDetail'
					},
					{
						src: word,
						title: '工作动态',
						class: 'color11',
						link: 'inRenda'
					},
					{
						src: person,
						title: '代表信息',
						class: 'color12',
						link: 'inNews'
					},
					{
						src: sport,
						title: '代表风采',
						class: 'color13',
						link: 'inEmail'
					},
					{
						src: question,
						title: '代表意见建议',
						class: 'color14',
						link: 'inEpeople'
					},
					{
						src: chat,
						title: '选民代表互动区',
						class: 'color9',
						link: 'inHot'
					}
				]
			}
		}
	}
</script>

<style>
	.menu-box2 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: #fff;
	}

	.rdbox-warp {
		width: 33.33%;
		padding: 36px 0;
		box-sizing: border-box;
		border-right: #cdcdcd solid 1px;
		border-bottom: #cdcdcd solid 1px;
	}

	.rdbox-warp:nth-child(3) {
		border-right: none;
	}
	.rdbox-warp:nth-child(6) {
		border-right: none;
	}

	.rdbox {
		width: 88px;
		height: 88px;
		margin-left: 50%;
		transform: translateX(-50%);
		border-radius: 50%;
	}

	.rdbox>img {
		width: 100%;
		height: 100%;
	}

	.rd-title {
		margin-top: 16px;
		text-align: center;
		font-size: 22px;
		color: #323232;
	}
</style>
